<template>
  <div class="container">
    <h2>电信渠道客户经理</h2>

    <div style="display: flex; justify-content: space-between">
      <div style="display: flex; margin-bottom: 20px">
        <el-cascader
          ref="refSubCat"
          size="small"
          :options="options"
          :props="{ checkStrictly: true, emitPath: false }"
          clearable
          placeholder="选择地区"
          @change="selec"
          v-model="selectSearch"
          clearCheckedNodes="getBusinessList"
          style="margin-right: 10px; margin-left: 20px; margin-top: 20px"
        ></el-cascader>
        <div>
          <el-input
            v-model="search"
            clearable
            placeholder=""
            @clear="getBusinessList"
            size="small"
            style="width: 60%; margin-right: 10px; margin-top: 20px"
          ></el-input>
          <el-button
            @click="found"
            type="primary"
            size="small"
            style="margin-right: 10px; margin-top: 20px"
            >查询</el-button
          >
        </div>
      </div>
      <div style="margin-right: 40px">
        <!-- <el-popover
          trigger="click"
          title="邀请"
          width="380"
          class="popover"
          placement="bottom"
        >
          <div style="text-align: left; padding: 25px 15px">
            <el-select v-model="select" slot="append">
              <el-option label="学校相关人员" value="1"></el-option>
            </el-select>
            <el-button slot="append" type="primary">复制链接</el-button>
          </div>

          <el-button
            size="small"
            type="primary"
            style="margin-top: 20px"
            slot="reference"
            >分享
          </el-button>
        </el-popover> -->
        <el-button
          @click="share"
          size="small"
          type="primary"
          style="margin-top: 20px"
          >点击复制分享链接
        </el-button>
      </div>
    </div>
    <el-table
      :row-class-name="xxxTableRowClassName"
      v-loading="isLoading"
      :data="tableData"
      :span-method="objectSpanMethod"
      style="width: 100%"
      :header-cell-style="{
        background: 'rgba(61,157,255,0.05)',
        color: '#333333',
      }"
    >
      <el-table-column
        prop="bouName"
        label="客户经理姓名"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="boDistrict"
        label="客户地区"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="boName"
        label="客户名称"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="boLinkName"
        label="联系人"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="boLinkPhone"
        label="联系人手机号"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="boFeedback"
        label="反馈信息"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="boBudget"
        label="预算金额/预备申请预算金额"
        width="width"
        align="center"
      >
      </el-table-column>
    </el-table>
    <pagination-page @size="changeSize" @page="changePage" :total="total" />
  </div>
</template>

<script>
import {
  AreaList,
  BusinessList,
  shareUrl,
  insertCustomerInformation,
} from "@/api/school/regionalManager/index.js";
import Decrypt from "@/utils/Decrypt";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      form: {
        uName: "",
        uPhone: "",
      },
      rules: {
        uName: [
          {
            required: true,
            message: "请输入管理员名字",
          },
        ],
        uPhone: [
          {
            required: true,
            message: "请输入手机号",
          },
          {
            min: 7,
            max: 11,
            message: "长度必须在7-11个之间",
            trigger: "blur", // 触发校验的时机是失去焦点
          },
        ],
      },
      submitLoading2: false,
      options: [],
      visible: false,
      select: "电信客户经理",
      disable: false,
      total: -1,
      page: {
        pageSi: 10,
        pageNo: 1,
      },
      tableData: [],
      isLoading: false,
      search: "",
      selectSearch: "",
      copy: "",
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getBusinessList();
    this.getAreaList();
    this.getshareUrl();
  },
  methods: {
    addsave() {
      // 对所有表单项进行统一校验
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          this.submitLoading2 = true;
          let data = {
            ...this.form,
          };
          insertCustomerInformation(data).then((res) => {
            this.submitLoading2 = false;
            if (res.code == 200) {
              this.$message.success(res.message);
              this.dialogVisible = false;
              this.getBusinessList();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    mergeComon(id, rowIndex) {
      // 合并单元格
      var idName = this.tableData[rowIndex][id];
      if (rowIndex > 0) {
        // eslint-disable-next-line eqeqeq
        if (this.tableData[rowIndex][id] != this.tableData[rowIndex - 1][id]) {
          var i = rowIndex;
          var num = 0;
          while (i < this.tableData.length) {
            if (this.tableData[i][id] === idName) {
              i++;
              num++;
            } else {
              i = this.tableData.length;
            }
          }
          return {
            rowspan: num,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 1,
          };
        }
      } else {
        var i = rowIndex;
        var num = 0;
        while (i < this.tableData.length) {
          if (this.tableData[i][id] === idName) {
            i++;
            num++;
          } else {
            i = this.tableData.length;
          }
        }
        return {
          rowspan: num,
          colspan: 1,
        };
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      switch (columnIndex) {
        case 0:
          return this.mergeComon("bouName", rowIndex);
          // eslint-disable-next-line no-unreachable
          break;
        case 7:
          return this.mergeComon("bouName", rowIndex);
          //   // eslint-disable-next-line no-unreachable
          break;
        // case 4:
        //   return this.mergeComon('bouName', rowIndex)
        //   // eslint-disable-next-line no-unreachable
        //   break
        // case 1:
        //   return this.mergeComon('bouName', rowIndex)
        //   // eslint-disable-next-line no-unreachable
        //   break
        // case 2:
        //   return this.mergeComon('bouName', rowIndex)
        //   // eslint-disable-next-line no-unreachable
        //   break
        //    case 8:
        //   return this.mergeComon('bouName', rowIndex)
        //   // eslint-disable-next-line no-unreachable
        //   break
      }
    },
    selec(value) {
      // this.selectSearch = this.$refs["refSubCat"].getCheckedNodes()[0].label;
      this.getBusinessList();
    },
    found() {
      this.getBusinessList();
    },
    getshareUrl() {
      let data = {
        uId: this.$store.state.user.USER_INFO.id,
      };
      shareUrl(data).then((res) => {
        if (res.code == 200) {
          let website = JSON.stringify(res.result);
          let website1 = website.substr(1); //删除首字符
          let website2 = website1.substring(0, website1.length - 1); //删除最后末字符
          this.copy = website2;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    share(val) {
      // 模拟 输入框
      let cInput = document.createElement("input");
      cInput.value = this.copy;
      document.body.appendChild(cInput);
      cInput.select(); // 选取文本框内容

      // 执行浏览器复制命令
      // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
      // Input要在正常的编辑状态下原生复制方法才会生效

      document.execCommand("copy");

      // 复制成功后再将构造的标签 移除
      document.body.removeChild(cInput);
      this.$message({
        type: "success",
        message: "复制成功",
      });
    },
    xxxTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    //区域下拉
    getAreaList() {
      AreaList().then((res) => {
        if (res.code == 200) {
          let arr = res.result;
          let arr1 = [];
          arr.map((value, index, arry) => {
            arr1.push({
              label: value.regionName,
              value: value.regionCode,
              parentRegionCode: value.parentRegionCode,
              children: value.childList.map((item) => ({
                ...item,
                label: item.regionName,
                value: item.regionCode,
                children: item.childList.map((v) => ({
                  ...v,
                  label: v.regionName,
                  value: v.regionCode,
                })),
              })),
            });
          });
          this.options = arr1;
        }
      });
    },
    //商机列表
    getBusinessList() {
      let data = {
        bouId: this.$store.state.user.USER_INFO.id,
        ...this.page,
        boName: this.search,
        boDistrictCode: this.selectSearch,
      };
      this.isLoading = true;
      BusinessList(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result.map((item) => ({
            ...item,
            boLinkPhone: Decrypt(item.boLinkPhone),
          }));
          this.total = res.total;
          this.isLoading = false;
        }
      });
    },

    changeSize(size) {
      this.page.pageSi = size;
      this.getBusinessList();
    },
    changePage(page) {
      this.page.pageNo = page;
      this.getBusinessList();
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-table__row.statistics-warning-row {
  background: rgba(61, 157, 255, 0.05);
}
::v-deep .el-form-item__label {
  padding-left: 60px;
}
::v-deep .el-input__inner {
  border-radius: 4px 0px 0px 4px;
}

::v-deep .el-popover {
  border-radius: 30px;
}
</style>
